<template>
  <div class="header-right">
    <el-dropdown
      placement="bottom-end"
      size="large"
      popper-class="custom-dropdown"
      style="cursor: pointer;"
    >
      <!-- src='https://www.lingchen.kim/art-design-pro/assets/avatar-CVDCzv8T.png' -->
      <el-avatar
        :size="40"
        :src="avatarImg"
      />
      <template #dropdown>
        <div style="padding: 0 14px;">
          <div style="margin: 12px 0;">
            <el-row style="height: 40px;">
              <el-col :span="8">
                <el-avatar
                  :size="40"
                  :src="avatarImg"
                />
              </el-col>
              <el-col
                :span="16"
                style="text-align: left;"
              >
                <el-row><el-col
                    :span="24"
                    style="font-size: 18px;"
                  >
                    {{ profileStore ? profileStore.getProfile().nickname : '昵称' }}
                  </el-col></el-row>
                <el-row><el-col
                    :span="24"
                    style="font-size: 14px; color:darkgrey;"
                  >
                    {{ profileStore ? profileStore.getProfile().email : '邮箱' }}
                  </el-col></el-row>
              </el-col>
            </el-row>
          </div>
          <el-divider style="margin: 0 auto;" />
          <el-dropdown-menu>
            <el-dropdown-item @click="() => { router.push('/system/profile') }">
              <el-icon size="small">
                <User />
              </el-icon>
              个人中心
            </el-dropdown-item>
            <el-dropdown-item @click="openGitee">
              <el-icon size="small">
                <ColdDrink />
              </el-icon>
              Gitee
            </el-dropdown-item>
          </el-dropdown-menu>
          <el-divider style="margin: 0 auto;" />
          <el-button
            type="info"
            @click="logoutBtn"
          >退出登录</el-button>
        </div>
      </template>
    </el-dropdown>
  </div>
</template>
<script lang="ts" setup>
import { logout } from '@/api/user'
import router from '@/router'
import { logoutResult } from '@/util/session'
import { isResultSuccess } from '@/util/http'
import { ElMessage } from 'element-plus'
import { useProfileStore } from '@/stores/profile'
import { onMounted } from 'vue'
import defaultSettings from '@/config/defaultSettings'
import avatarImg from '@/assets/paidaxing.jpeg'

const profileStore = useProfileStore()

const logoutBtn = async () => {
  try {
    const res = await logout()
    if (res && isResultSuccess(res)) {
      logoutResult()
      ElMessage.success('退出登录成功')
    }
  } catch (error) {
    ElMessage.error('退出登录失败' + error.response.data.msg)
  }
  router.push('/login')
}

const openGitee = () => {
  console.log(defaultSettings.giteeUrl)
  window.open(defaultSettings.giteeUrl, '_blank')
}

onMounted(() => {
  console.log(profileStore.getProfile())
})

</script>
<style scoped>
.header-right {
  margin: auto auto;
}

.el-dropdown-item {
  text-align: center;
  float: center;
}

.el-button {
  margin: 10px auto;
  width: 100%;
}
</style>
<style>
/* 这里要单独的不带scope的style才生效 */
.custom-dropdown {
  min-width: 240px !important;
  height: auto;
  text-align: center;
  float: center;
}
</style>